<script>
import MyHead from '@/components/01_myheader.vue'

  export default {
    methods:{
      handleClick(){
        //1：ref属性添加到元素上，可以获取当前dom
        console.log(this.$refs.elem)
        //2：ref属性添加到组件上，可以获取当前组件vm对象
        console.log(this.$refs.elem3)
        //3：ref属性添加到组件上，可以获取当前组件vm的属性值
        console.log(this.$refs.elem3.message)
        //4：ref属性添加到组件上，执行当前组件vm方法
        this.$refs.elem3.handleMessage('MyHead')
        //5：$ref $attrs间接实现父子通信
      }
    },
    components:{
      MyHead
    }
  }
</script>

<template>
  <div>
    <h2>ref属性</h2>
    <button @click="handleClick">点击</button>
    <div ref = "elem">aaaaa</div>
    <!--2：ref属性添加到组件上，可以获取当前组件vm对象-->
    <my-head ref = "elem3"></my-head>
  </div>
</template>

<style scoped>

</style>